<template>
  <div id="tabs-detail" class="clear-fix">
    <div class="tabs-left"><slot name="tabs-left"/></div>
    <div class="tabs-right">
      <div class="tabs-top"><slot name="tabs-top"/></div>
      <div class="tabs-bottom"><slot name="tabs-bottom"/></div>
    </div>
  </div>
</template>
<script>
export default {
  name:'TabsDetail'
}
</script>
<style>
#tabs-detail{
  padding: 1.625rem;
}
#tabs-detail .tabs-left{
  display: inline-block;
  width: 14.375rem;
  height: 11.25rem;
}
#tabs-detail .tabs-right{
  float: right;
  position: relative;
  top: 0;
  left: 0;
  width: 40rem;
  height: 11.25rem;
  margin-left: 1.625rem;
}
#tabs-detail .tabs-bottom{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
</style>